<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>QUARTZ-CONSOLE</title>
    <link href="/static/favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet"th:href= "@{/css/bootstrap.min.css}">
    <link rel="stylesheet"th:href= "@{/css/cronGen.css}">
    <style type="text/css">
	.btnRun, .btnPause, .btnResume, .btnEdit {margin-right: 8px;}
	.input-group {margin-bottom: 5px;}
	.title {text-align:center; font-size:30px; margin-top:15px;}
	.btnCreate {text-align:right; margin:5px 15px;}
	.head {border:solid; border-color:#8080805c; border-width:1px;}
    </style>
    <script type="application/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="application/javascript" th:src="@{/js/bootstrap.min.js}"></script>
    <script type="application/javascript" th:src="@{/js/bootstrap-select.min.js}"></script>
    <script type="application/javascript" th:src="@{/js/cronGen.min.js}"></script>
    <script type="application/javascript" th:src="@{/js/index.js?v=11}"></script>

</head>
<body>

	<div class="container-fluid" style="padding-top: 15px;">
	    
	    <div class="head">
	    	<div class="title">QUARTZ CONSOLE</div>
	    	<hr class="line">
	        <div class="btnCreate">
				<button type="button" class="btn btn-primary" id="createBtn" data-toggle="modal">create</button>
		    </div>
		</div>
		
		<table class="table table-bordered">
			<thead>
				<tr class="active">
					<th>id</th>
					<th>type</th>
					<th>name</th>
					<th>group</th>
					<th>crons</th>
					<th>state</th>
					<th>desc</th>
					<th>content</th>
					<th style="text-align: center;">operation</th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="item,itemStat:${jobs}">
					<td th:text="${itemStat.index+1}"></td>
					<td th:id="type_+${item.jobId}" th:text="${item.jobType}"></td>
					<td th:id="name_+${item.jobId}" th:text="${item.jobName}"></td>
					<td th:id="group_+${item.jobId}" th:text="${item.jobGroup}"></td>
					<td th:id="cron_+${item.jobId}" th:text="${item.cronExpression}"></td>
					<td th:id="status_+${item.jobId}" th:text="${item.jobStatus}"></td>
					<td th:id="desc_+${item.jobId}" th:text="${item.desc}"></td>
					<td th:id="content_+${item.jobId}" th:text="${item.content}"></td>
					<td style="text-align: center;">
						<div class="btn-group text-center" role="group"
							th:data-id="${item.jobId}">
							<button type="button" class="btn btn-default btnRun">runOnce</button>
							<button type="button" class="btn btn-default btnPause">pause</button>
							<button type="button" class="btn btn-default btnResume">resume</button>
							<button type="button" class="btn btn-default btnEdit">edit</button>
							<button type="button" class="btn btn-warning btnDelete">delete</button>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="modal fade" id="quartzModal" tabindex="-1" role="dialog" aria-labelledby="quartzModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="quartzModalLabel">cron create</h4>
				</div>

                <div class="modal-body">
					<form id="mainForm" method="post" action="/api/saveOrUpdate?t=" enctype="multipart/form-data">
						<div>
							<input type="hidden" class="form-control" id="jobId" name="jobId" />
							<div class="input-group">
								<span class="input-group-addon">job name</span> 
								<input type="text" alias="no-edit" name="jobName" class="form-control" id="edit_name" />
							</div>
							<div class="input-group">
								<span class="input-group-addon">job group</span> 
								<input type="text" alias="no-edit" name="jobGroup" class="form-control" id="edit_group" />
							</div>
							<div class="input-group">
								<span class="input-group-addon">job status</span>
								<select id="edit_status" name="jobStatus" class="form-control" data-size="10">
									<option value="NORMAL" selected="selected">NORMAL</option>
									<option value="PAUSED">PAUSED</option>
								</select>
							</div>
							<div class="input-group">
								<span class="input-group-addon">job description</span> 
								<input type="text" alias="no-edit" name="desc" class="form-control" id="edit_desc" />
							</div>
                            <div class="input-group">
                                <span class="input-group-addon">job type</span>
                                <select id="edit_type" name="jobType" class="form-control" data-size="10">
                                    <option value="java" selected="selected">java</option>
                                    <option value="dynamic">dynamic-class</option>
                                    <option value="shell">shell</option>
                                </select>
                            </div>
                            <div class="input-group" style="display: none" id="classFile">
                                <span class="input-group-addon">upload file</span>
                                <input type="file" alias="no-edit" name="classFile" class="form-control" id="edit_file" />
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">job content</span>
                                <input type="text" alias="no-edit" name="content" class="form-control" id="edit_content" />
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">cron expression</span>
                                <input type="text" alias="no-edit" name="cronExpression" class="form-control" id="cronExpression" />
                            </div>
						</div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
                            <button type="button" class="btn btn-primary" id="save">save</button>
                        </div>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>